<template>
	<view class="content">
		<u-popup mode="center" :show="showPop" @close="closePop" :round="50">
			<view class="pop project-pop">
				<view class="title">
					<text>{{ type == 'add' ? '添加' : '修改' }}停电</text>
				</view>
				<view class="body">
					<view class="wrapper _scroll">
						<view class="section-pop">
							<view class="form-item">
								<view class="label">停电天数</view>
								<view class="input">
									<u--input placeholderClass="input-placeholder" class="input-body" placeholder="请输入停电天数" v-model="form.td_day"></u--input>
								</view>
							</view>
							<view class="form-item">
								<view class="label">工程分类</view>
								<view class="input">
									<u--input placeholderClass="input-placeholder" class="input-body" placeholder="请输入工程分类" v-model="form.gc_fl"></u--input>
								</view>
							</view>
							<view class="form-item">
								<view class="label">停电设备类型</view>
								<view class="input">
									<u--input placeholderClass="input-placeholder" class="input-body" placeholder="请输入停电设备类型" v-model="form.sb_type"></u--input>
								</view>
							</view>
							<view class="form-item">
								<view class="label">工程性质</view>
								<view class="input">
									<u--input placeholderClass="input-placeholder" class="input-body" placeholder="请输入工程性质" v-model="form.gc_xz"></u--input>
								</view>
							</view>
							<view class="form-item">
								<view class="label">工作单位</view>
								<view class="input">
									<u--input placeholderClass="input-placeholder" class="input-body" placeholder="请输入工作单位" v-model="form.work_dw"></u--input>
								</view>
							</view>
							<view class="form-item">
								<view class="label">工作内容</view>
								<view class="input">
									<u--textarea placeholderClass="input-placeholder" class="text-body" placeholder="请输入工作内容" v-model="form.work_detail"></u--textarea>
								</view>
							</view>

							<view class="form-item">
								<view class="label">停电厂站</view>
								<view class="input">
									<u--input placeholderClass="input-placeholder" class="text-body" placeholder="请输入停电厂站" v-model="form.factory_stations"></u--input>
								</view>
							</view>
							<view class="form-item">
								<view class="label">五级电网风险</view>
								<u-radio-group v-model="form.is_high_risk" placement="column">
									<u-radio :customStyle="{ marginBottom: '8px' }" v-for="(item, index) in radiolist" :key="index" :label="item.name" :name="item.name"></u-radio>
								</u-radio-group>
							</view>
							<view class="form-item" v-if="form.is_high_risk === '是'">
								<view class="label">五级电网风险描述</view>
								<view class="input">
									<u--textarea placeholderClass="input-placeholder" class="text-body" placeholder="请输入五级电网风险描述" v-model="form.risk_desc"></u--textarea>
								</view>
							</view>

							<view class="form-item">
								<view class="label">开始时间</view>
								<view class="input">
									<view class="input-body" @click="handleShowTime('start_date')">{{ form.start_date }}</view>
								</view>
							</view>
							<view class="form-item">
								<view class="label">结束时间</view>
								<view class="input">
									<view class="input-body" @click="handleShowTime('end_date')">{{ form.end_date }}</view>
								</view>
							</view>
<!-- 
							<view class="form-item"  v-show="form.is_high_risk === '是'">
								<view class="label" style="width: 150rpx;">风险管控图</view>
								<view class="value"  style="width: 400rpx; " >
									<u-upload   :fileList="fileList" :previewFullImage="true" @afterRead="afterRead" @delete="deletePic" multiple :maxCount="6"></u-upload>
								</view> -->

							<view class="form-item" v-if="is_high_risk==='是'">
								<view class="label">风险管控图</view>
								<u-upload :fileList="fileList" :previewFullImage="true" @afterRead="afterRead"
									@delete="deletePic" multiple :maxCount="6"
									:style="{position:'relative',height:fileList.length == 0 ? '44rpx' : 'unset',border: fileList.length == 0 ? 'solid 2rpx #1534ce' : 'none', borderRadius: '20rpx'}">
									<view class="iconfont icon-tupian"></view>
								</u-upload>
								<!-- 									<image @click="previewImage(meetingPic)" style="width: 100px;height: 100px;" :src="meetingPic" mode="aspectFill">
			<view v-show="picshow == 1 && meetingPic != ''"
             style="position: absolute;margin: -110px 0 0 43vw; color: red;" @click="picdel()">x</view>
		</image> -->

							</view>
						</view>
					</view>
					<view class="pop-custom-button-wrapper">
						<view class="custom-button" @click="closePop()">
							取消
						</view>
						<view class="custom-button" @click="submit">
							提交
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-datetime-picker
			:show="showTime"
			closeOnClickOverlay
			mode="date"
			v-model="timeStamp"
			@confirm="confirmTime"
			@cancel="showTime = false"
			@close="showTime = false"
		></u-datetime-picker>
		<view class="custom-button-wrapper">
			<view class="custom-button" @click="handleShowPop('update')">修改</view>
			<!-- <view class="custom-button" @click="handleShowPop('add')">添加</view> -->
		</view>
		<view class="section-0">
			<view class="section-body">
				<view class="peoject-name">
					<view class="title">项目名称</view>
					<view class="name">
						<text>{{ name }}</text>
						<!-- <view class="iconfont icon-xiangyou1"></view> -->
					</view>
				</view>
				<timeLine :list="list" :is_high_risk="is_high_risk"></timeLine>
			</view>
		</view>
	</view>
</template>

<script>
const riskMap = {
	td_day: {
		type: 'text',
		name: '停电天数',
		filter: val => (val ? val : '-')
	},
	gc_fl: {
		type: 'text',
		name: '工程分类',
		filter: val => (val ? val : '-')
	},
	sb_type: {
		type: 'text',
		name: '停电设备类型',
		filter: val => (val ? val : '-')
	},
	sb_name: {
		type: 'text',
		name: '停电设备',
		filter: val => (val ? val : '-')
	},
	gc_xz: {
		type: 'text',
		name: '工程性质',
		filter: val => (val ? val : '-')
	},
	work_dw: {
		type: 'text',
		name: '工作单位',
		filter: val => (val ? val : '-')
	},
	work_detail: {
		type: 'text',
		name: '工作内容',
		filter: val => (val ? val : '-')
	},
	factory_stations: {
		type: 'text',
		name: '停电厂站',
		filter: val => (val ? val : '-')
	},
	is_high_risk: {
		type: 'text',
		name: '五级电网风险',
		filter: val => (val ? val : '-')
	},
	risk_desc: {
		type: 'text',
		name: '五级电网风险描述',
		filter: val => (val ? val : '-')
	},

	start_date: {
		type: 'text',
		name: '计划开始时间',
		filter: val => (val ? val.substring(0, 10) : '-')
	},
	end_date: {
		type: 'text',
		name: '计划结束时间',
		filter: val => (val ? val.substring(0, 10) : '-')
	},
	start_date_real: {
		type: 'text',
		name: '实际开始时间',
		filter: (val) => val ? val.substring(0, 10) : '-'
	},
	end_date_real: {
		type: 'text',
		name: '实际结束时间',
		filter: (val) => val ? val.substring(0, 10) : '-'
	},
	file_path: {
		type: 'image',
		name: '风险管控图',
		filter: val => {
			return [
				{
					url: val
				}
			]
		}
	}
	// file_path: {
	// 	type: 'image',
	// 	name: '风险管控图',
	// 	filter: (val) => val ? val : '-'
	// },
}
import { powerInfoApi } from '@/api/statistics.js'
import { addOutageApi, updateOutageApi } from '@/api/outage.js'
import { mapGetters, mapActions } from 'vuex'
import timeLine from '@/components/time_line/danduzujian.vue'
import { uploadUrl } from '@/baseUrl.js'
export default {
	components: {
		timeLine
	},
	data() {
		return {
			name: '',
			id: '',
			list: [],
			curd: 1,
			showPop: false,
			form: {},
			type: 'add',
			info: {},
			showTime: false,
			timeType: '',
			timeStamp: Number(new Date()),
			fileList: [
				
			],
			picshow: '',
			meetingPic: [],
			radiolist: [
				{
					name: '是'
				},
				{
					name: '否'
				}
			],
			is_high_risk: '',
			imgsadas:[]
		}
	},
	methods: {
		previewImage(url) {
			var arr = []
			arr.push(url)
			uni.previewImage({
				current: 0, //预览图片的下标
				urls: arr //预览图片的地址，必须要数组形式
			})
		},
		// 删除图片
		deletePic(event) {
			this[`fileList`].splice(event.index, 1)
		},
		//上传照片
		async afterRead(event) {
			// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file)
			let fileListLen = this[`fileList`].length
			lists.map(item => {
				this[`fileList`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				})
			})
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url)
								let item = this[`fileList`][fileListLen]
								this[`fileList`].splice(
									fileListLen,
									1,
									Object.assign(item, {
										status: 'success',
										message: '',
										url: result.data.file_id,
										file_id: result.data.file_id,
										file_path: result.data.file_path
									})
								)
								fileListLen++
			}
		},
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: uploadUrl, // 仅为示例，非真实的接口地址
					filePath: url,
					name: 'file',
					formData: {
						user: 'test'
					},
					success: res => {
						setTimeout(() => {
							resolve(JSON.parse(res.data))
						}, 1000)
						this.meetingPic.push(JSON.parse(res.data).data.file_path) 
					}
				})
			})
		},
		confirmTime(val) {
			const timeStamp = val.value
			this.form[this.timeType] = this.formatDate(timeStamp)
			this.closeShowTime()
		},
		formatDate(timeStamp) {
			const date = new Date(timeStamp) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
			const Y = date.getFullYear() + '-'
			const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
			const D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
			const h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
			const m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
			const s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
			return Y + M + D
		},
		handleShowTime(type) {
			this.timeType = type
			this.showTime = true
		},
		closeShowTime() {
			this.showTime = false
		},
		submit() {
			let obj = {}
			if (this.type == 'add') {
				obj = {
					project_name: this.info.project_name,
					project_id: this.info.project_id,
					...this.form
				}
				this.addOutage(obj)
			} else {	
				console.log(this.form,3221);
					obj = {
						id:this.form.id,
						sb_name:this.form.sb_name,
						start_data:this.form.start_date,
						end_data:this.form.end_data,
						td_day:this.form.td_day,
						work_detail:this.form.work_detail,
						gc_fl:this.form.gc_fl,
						gc_xz:this.form.gc_xz,
						sb_type:this.form.sb_type,
						work_dw:this.form.work_dw,
						xg_jl:this.form.xg_jl,
						td_year:this.form.td_year,
						five_td_risk:this.form.five_td_risk,
						factory_stations:this.form.factory_stations,
						is_high_risk:this.is_high_risk,
						risk_desc:this.form.risk_desc,
						file_id: this.fileList[0]
							? this.fileList
									.map(obj => {
										return obj.file_id
									})
									.join(',')
							: ''
					}
				this.updateOutage(obj)
			}
		},
		addOutage(obj) {
			uni.showLoading({
				title: '加载中...'
			})
			addOutageApi({
				...obj
			}).then(res => {
				if (res.data.code == 1) {
					uni.showToast({
						title: '操作成功',
						duration: 1000,
						icon: 'success'
					})
					this.closePop()
					uni.hideLoading()
				} else {
					uni.showToast({
						title: '操作失败',
						duration: 1000,
						icon: 'error'
					})
					uni.hideLoading()
				}
			})
		},
		updateOutage(obj) {
			updateOutageApi({
				...obj
			}).then(res => {
				if (res.data.code == 1) {
					uni.showToast({
						title: '操作成功',
						duration: 1000,
						icon: 'success',
					})
					this.fileList=[]
					this.closePop()
					this.fetchData()
					uni.hideLoading()
				} else {
					uni.showToast({
						title: '操作失败',
						duration: 1000,
						icon: 'error'
					})
					uni.hideLoading()
				}
			})
		},
		
		handleShowPop(type) {
			// this.clearForm();
			if (type == 'update') {
				this.form = this.info
			}
			this.type = type
			this.showPop = true
		},
		closePop() {
			this.fetchData()
			this.showPop = false
		},
		go(item) {
			uni.navigateTo({
				url: '/pages/statistics/today/risk/info/detail/index'
			})
		},
		async fetchData() {
			uni.showLoading({
				title: '加载中...'
			})
			const { data } = await powerInfoApi({
				id: this.id
			})
			uni.hideLoading()
			if (data.code === 1) {
				let arr = []
				let res = data.data
				for (let key in riskMap) {
					let item = {}
					if (riskMap[key]) {
						var type = riskMap[key].type
						item = {
							title: riskMap[key].name,
							content: {
								type: type,
								value: riskMap[key].filter(res[key])
							}
						}
						arr.push(item)
					}
				}
                if (this.is_high_risk === '否' ||this.is_high_risk === ''||this.is_high_risk === null||this.is_high_risk === '_') {					
	             const arr1 = []
					this.list = arr.filter(item => {
						if (item.title !== '风险管控图' && item.title !== '五级电网风险描述') {
							return arr1.push(item)
						}
					})
				} else {
					this.list = arr
				}
				this.info = res
				this.fileList=[]
				var lala=data.data.file_id.split(',')
				for(var i=0;i<data.data.file_path.length;i++){
					var obj={}
					obj.url=data.data.file_path[i]
					obj.file_path=data.data.file_path[i]
					for(var k=0;k<lala.length;k++){
						if(i==k){
							obj.file_id=lala[k]
							this.fileList.push(obj)
						}
					}
				}
			}
		}
	},
	onLoad(data) {
		console.log(data)
		this.id = JSON.parse(data.params).id
		this.name = JSON.parse(data.params).project_name
		this.is_high_risk = JSON.parse(data.params).is_high_risk
	},

	onReady() {
		this.fetchData()
	}
}
</script>

<style lang="scss" scoped>
.pop-custom-button-wrapper {
	width: 100%;
	display: flex;
	justify-content: space-between;
}

.pop {
	width: 671rpx;
	padding-bottom: 20rpx;
	background-color: #fff;
	border-radius: 35rpx;
	overflow: hidden;

	.title {
		width: 100%;
		height: 96rpx;
		line-height: 96rpx;
		background-color: #1534ce;
		font-size: 42rpx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 4rpx;
		color: #ffffff;
		text-align: center;
	}

	.body {
		.section-pop {
			width: 100%;
			height: calc(100vh - 450rpx);
			border-radius: 50rpx;
			background-color: #fafbfd;
			padding-top: 50rpx;
			padding-bottom: 60rpx;
			box-shadow: 0rpx -10rpx 29rpx 8rpx rgba(#bcbcb5, 0.19);
			position: relative;
			top: 0;
		}

		.form-item {
			width: 600rpx;
			line-height: 48rpx;
			margin: 0 auto;
			margin-bottom: 25rpx;
			display: flex;
			&:last-child {
				margin-bottom: 34rpx;
			}

			&.upload-wrap {
				align-items: unset;
				height: unset;
				line-height: unset;
			}

			@include clear();

			.label {
				float: left;
				width: 130rpx;
				height: 48rpx;
				text-align: left;
				line-height: 44rpx;
				font-size: 26rpx;
				color: #46464a;
			}

			/deep/ .u-upload__wrap {
				// width: calc(100% - 206rpx) !important;
				width: calc(100%) !important;
				background-color: transparent;
			}

			.icon-tupian {
				position: absolute;
				right: 25rpx;
				line-height: 44rpx;
				color: #1534ce;
				font-size: 28rpx;
			}

			/deep/ .u-radio-label--left {
				margin-right: 55rpx;
			}

			/deep/ .u-radio__text {
				font-size: 26rpx !important;
				color: #46464a !important;
			}

			.input {
				float: left;
				width: calc(100% - 134rpx - 3rpx);
				border-radius: 20rpx;
				border: solid 2rpx #1534ce;

				.input-body {
					box-sizing: border-box;
					width: 100%;
					height: 44rpx;
					padding: 0 !important;
					border: none;
					padding-left: 30rpx !important;
					padding-right: 30rpx !important;
					font-size: 26rpx;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: rgba(0, 0, 0, 0.8);
					line-height: 44rpx;

					/deep/ .uni-input-input {
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: rgba(0, 0, 0, 0.8);
					}
				}

				.text-body {
					box-sizing: border-box;
					width: 100%;
					padding: 0 !important;
					border: none;
					padding-left: 30rpx !important;
					padding-right: 30rpx !important;
					padding-top: 15rpx;
					padding-bottom: 15rpx;
					font-size: 26rpx;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: rgba(0, 0, 0, 0.8);
					line-height: 30rpx;
					border-radius: 20rpx;

					/deep/ .uni-textarea-textarea {
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: rgba(0, 0, 0, 0.8);
					}
				}

				.input-placeholder {
					font-size: 26rpx;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: rgba(0, 0, 0, 0.5);
				}
			}
			.images{
				width: 100px;
				margin-right: 20rpx;
				height:  100px;
				margin-bottom: 20rpx;
				image{
					width: 100px ;
					height: 100px;
				}
			}
		}
	}
}

.content {
	background-color: #fff;
}

.custom-button-wrapper {
	width: 100%;
	display: flex;
	justify-content: space-between;
	box-sizing: border-box;
	padding: 0 40rpx;
	position: fixed;
	bottom: 30rpx;
	z-index: 99;

	.custom-button {
		width: 250rpx;
		box-shadow: 0rpx 13rpx 35rpx 0rpx rgba(60, 90, 214, 0.42);
	}
}

.section-0 {
	width: 100%;
	background-color: #3a5df5;

	.section-body {
		padding-top: 50rpx;

		.peoject-name {
			margin-bottom: 65rpx;
			width: 100%;
			height: 158rpx;
			background-color: #ffffff;
			border-radius: 35rpx;
			box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);

			.title {
				width: 533rpx;
				height: 50rpx;
				padding-top: 15rpx;
				line-height: 50rpx;
				border-bottom: solid 3rpx #f2f2f0;
				font-size: 26rpx;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 0rpx;
				color: #8497ac;
				margin-left: 35rpx;
			}

			.name {
				box-sizing: border-box;
				padding: 0 35rpx;
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 26rpx;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 0rpx;
				color: #46464a;

				.iconfont {
					float: right;
					font-size: 30rpx;
					color: #3b3c40;
				}
			}
		}

		box-sizing: border-box;
		width: 100%;
		padding-left: 40rpx;
		padding-right: 40rpx;
		padding-bottom: 100rpx;
		background-color: #fff;
		background-size: cover;
		background-repeat: no-repeat;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
	}
	
}
</style>
